<template>
  <carousel
    v-if="cardInfoList"
    v-bind="carouselOption"
    class="swiper-container"
    @after-slide-change="swiperCard"
  >
    <!-- <div class="swiper-wrapper"> -->
    <slide
      v-for="(cardInfo,index) in cardInfoList"
      :key="'card-div'+index"
      :index="index"
    >
      <component
        :ref="refName"
        :cardInfo="cardInfo"
        v-bind:is="getItemComponent(cardInfo.state)"
      ></component>
      <!-- @clickQrcode="clickQrcodeToRefresh" -->
      <!-- :class="'swiper-slide-ticket'+index" -->
    </slide>
    <!-- </div> -->
  </carousel>
</template>

<script>
// import Swiper from 'swiper'
// import 'swiper/dist/css/swiper.css'
// import { Carousel3d, Slide } from 'vue-carousel-3d'
import { XbCarousel3d, XbSlide } from '@/components/carousel3d/index.js'
import CardOpenModule from '../cardmodule/CardOpenModule'
import CardNotOpenModule from '../cardmodule/CardNotOpenModule'
import CardReviewingModule from '../cardmodule/CardReviewingModule'
import CardFrozenModule from '../cardmodule/CardFrozenModule'
export default {
  components: {
    'carousel': XbCarousel3d,
    'slide': XbSlide,
    'card-open': CardOpenModule,
    'card-not-open': CardNotOpenModule,
    'card-reviewing': CardReviewingModule,
    'card-frozen': CardFrozenModule
  },
  props: {
    cardInfoList: {
      type: Array,
      default: null
    }
  },
  data() {
    return {
      screenWidth: 0, // 屏幕宽度
      index: -1, // 当前卡片索引
      cardInfoListChangeTime: 0, // 列表数据改变次数
      // qrcodeRepeatTime: 3000, // 1分钟请码一次
      carouselOption: {
        // width: 0,
        // height: 0,
        // width: this.getConvertedLength(600),
        // height: this.getConvertedLength(860),
        border: 0,
        loop: true,
        clickable: false,
        disable3d: false,
        perspective: 0,
        inverseScaling: -70,
        space: 23
        // onSlideChange: this.swiperCard
      },
      swiper: null,
      swiperOption: {
        // 如果自行设计了插件，那么插件的一些配置相关参数，也应该出现在这个对象中，如下debugger
        init: true,
        initialSlide: 0,
        loop: true,
        slidesPerView: 'auto',
        loopedSlides: 5,
        centeredSlides: true, // <span style="color:rgb(68,68,68);font-family:'microsoft yahei';font-size:13px;">设定为true时，活动块会居中，而不是默认状态下的居左。</span>
        longSwipes: 0.3,
        observer: true,
        observeParents: true,
        observeSlideChildren: true,
        coverflowEffect: {
          rotate: 0,
          stretch: -80,
          depth: 400,
          modifier: 0.5,
          slideShadows: false
        },
        effect: 'coverflow',
        on: {}
      } // swiper配置
    }
  },
  computed: {
    // 为了每次列表数据发生改变时可以拿到最新的$refs, 数据变更后的ref必须改变
    refName() {
      return 'listcard' + this.cardInfoListChangeTime
    },
    slideClass() {
      return this.cardInfoList.length > 1 ? 'swiper-slide' : ''
    }
  },
  watch: {
    cardInfoList(newValue, oldValue) {
      if (newValue && newValue !== oldValue) {
        if (this.carouselOption.count !== newValue.length) {
          this.carouselOption.count = newValue.length
        }
        this.cardInfoListChangeTime++
        this.$nextTick(() => {
          this.index = -1
          this.swiperCard(0)
        })
        // this.initSwiper()
      }
    }
  },
  mounted() {
    // this.screenWidth = document.body ? document.body.clientWidth : document.documentElement.clientWidth
    // this.getClientWidth()
  },
  methods: {
    getClientWidth() {
      setTimeout(() => {
        this.screenWidth = document.body ? document.body.clientWidth : document.documentElement.clientWidth
        console.log('~~~~~~屏幕宽度~~~~~~', this.screenWidth)
        if (this.screenWidth > 0) {
          // 如果获取到的屏幕宽度大于0，则重新设置组件的宽高
          this.carouselOption.width = this.getConvertedLength(600)
          this.carouselOption.height = this.getConvertedLength(800)
        } else {
          // 否则继续获取屏幕宽度
          this.getClientWidth()
        }
      }, 1000)
    },
    getItemComponent(state) {
      let itemName = ''
      switch (state) {
        case 0: // 未开通
          itemName = 'card-not-open'
          break
        case 1: // 审核中
          itemName = 'card-reviewing'
          break
        case 2: // 已开通
          itemName = 'card-open'
          break
        case 3: // 冻结
          itemName = 'card-frozen'
          break
      }
      return itemName
    },
    swiperCard(index = 0) {
      if (this.index !== index) {
        this.index = index
        // let showCardModule = this.$refs.listcard[index]
        let showCardModule = this.$refs[this.refName][index]
        this.$emit('changeCardInfo', showCardModule, showCardModule.cardInfo)
      }
    },
    clickQrcodeToRefresh() {
      this.$emit('clickQrcode')
    },
    getConvertedLength(length = 0) {
      if (length !== 0) {
        return (length * this.screenWidth) / 750
      }
      return length
    }
    /**
     * 初始化swiper
     */
    // initSwiper() {
    //   if (this.swiper) {
    //     this.swiper.destroy(true, true)
    //     this.swiper = null
    //   }
    //   console.log('初始化')
    //   this.$nextTick(() => {
    //     if (this.cardInfoList.length > 1) {
    //       setTimeout(() => {
    //         // 重新创建swiper，防止swiper无法及时更新
    //         let self = this
    //         // this.swiperOption.on.slideChangeTransitionEnd = function () {
    //         this.swiperOption.on.transitionEnd = function () {
    //           self.swiperCard(this.realIndex)
    //         }
    //         this.swiper = new Swiper('.swiper-container', this.swiperOption)
    //       }, 0)
    //     } else {
    //       this.swiperCard()
    //     }
    //   })
    // },
  }
}
</script>

<style>
.swiper-container {
  width: 750px !important;
  height: 860px !important;
  margin: 0 !important;
  overflow: hidden;
}
.card-module-wrapper {
  margin: auto;
}
.swiper-slide,
.carousel-3d-slide {
  /* width: 600px;
  height: 860px; */
  /* transition: opacity 0.3s linear; */
  opacity: 0.7 !important;
  background: none !important;
}
.swiper-slide-active {
  opacity: 1 !important;
}
.carousel-3d-slider {
  width: 600px !important;
  height: 860px !important;
}
</style>
